<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <title>产品</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/extends.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body class="easyui-layout">
<div id="body" region="center">
    <!-- 查询条件区域 -->
    <div id="search_area">
        <div id="conditon">
            <table border="0">
                <tr>
                    <td>产品名：</td>
                    <td><input name="name" id="name"/></td>
                    <td>&nbsp;负责人：</td>
                    <td><input name="manager" id="manager"/></td>
                    <td>
                        <a href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search"
                           plain="true" onclick="query()">查询</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset"
                           plain="true">重置</a>
                    </td>
                </tr>
            </table>
        </div>
        <!--<span id="openOrClose">111</span>-->
    </div>
    <!-- 数据表格区域 -->
    <table id="table" style="table-layout:fixed;"></table>
    <!-- 表格顶部工具按钮 -->
    <div id="tt_btn">
        <a href="javascript:void(0)" id="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
        <a href="javascript:void(0)" id="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:void(0)" id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
</div>

<!-- 用于弹出框 -->
<div id="child_win"></div>

</body>
</html>

<script>
    $(function () {
        $.ajaxSetup({cache: false});
        init_datagrid();
        init_toolbar();
    });
    function init_datagrid() {
        $table().datagrid({
            height: datagrid_height(),
            width: datagrid_width(),
            idField: 'id',
            url: _gets_url(),
            method: "GET",
            singleSelect: true,
            nowrap: true,
            fitColumns: true,
            rownumbers: true,
            showPageList: false,
            columns: datagrid_columns(),
            toolbar: '#tt_btn',
            pagination: false,
            onDblClickRow: function (rowIndex, rowData) {
                viewDetail(rowData.userId);
            }
        });
    }
    function datagrid_height() {
        return $bodydiv().height() - $searcharea().height() - 5;
    }
    function datagrid_width() {
        return $bodydiv().width();
    }
    function init_toolbar() {
        //新增
        $("#save").on("click", function () {
            $table().datagrid('clearSelections');
            $childwin().window({
                title: '新增', width: nedit_ui_width(), height: nedit_ui_height(), href: nedit_ui_url()
            });
        });
        //修改
        $("#update").on("click", function () {
            if (!_isSelect())
                $parent.messager.alert('警告', '未选中任何行!', 'warning');
            else
                $childwin().window({
                    title: '修改', width: nedit_ui_width(), height: nedit_ui_height(), href: nedit_ui_url()
                });
        });
        //删除
        $("#delete").on("click", function () {
            if (!_isSelect())
                $parent.messager.alert('警告', '未选中任何行!', 'warning');
            else {
                var row = $table().datagrid('getSelected');
                $parent.messager.confirm('提示', '确认删除' + row.name + '?', function (r) {
                    if (r)  _delete(row);
                });
            }
        });
    }
    function query() {
        $table().datagrid('load', query_condition());
    }
    function viewDetail(date, id) {
        $parent.messager.alert("提示", "查询详细", "info");
    }
    // 监听窗口大小变化
    window.onresize = function () {
        setTimeout(domresize, 100);
    };
    //改变表格宽高
    function domresize() {
        $table().datagrid('resize', {
            height: datagrid_height(),
            width: datagrid_width()
        });
    }
    function selected() {
        return $table().datagrid('getSelected');
    }
    function _isSelect() {
        return $table().datagrid('getSelected') != null;
    }
    function _post() {
        _doSubmit(_post_url(), 'POST', function (data) {
            var json = eval('(' + data + ')');
            $table().datagrid('appendRow', json);
            $childwin().window("close");
        });
    }
    function _delete(row) {
        $.ajax({
            type: "DELETE",
            url: _delete_url(row.id),
            success: function () {
                var rowIndex = $table().datagrid('getRowIndex', row);
                $table().datagrid('deleteRow', rowIndex);
                $table().datagrid('clearSelections');
            },
            error: function (response) {
                $.messager.alert('错误', '删除' + row.name + '失败：' + response.responseText, 'error');
            }
        });
    }
    function _put() {
        _doSubmit(_put_url(), 'PUT', function (data) {
            var json = eval('(' + data + ')');
            var row = $table().datagrid('getSelected');
            var rowIndex = $table().datagrid('getRowIndex', row);
            $table().datagrid('updateRow', {
                index: rowIndex,
                row: json
            });
            $table().datagrid('clearSelections');
            $childwin().window("close");
        });
    }
    function _submit() {
        if (_isSelect())
            _put();
        else
            _post();
    }
    function _doSubmit(url, method, callback) {
        $form().form('submit', {
            url: url + '?_method=' + method,
            onSubmit: function () {
                return $(this).form('enableValidation').form('validate');
            },
            success: function (data) {
                callback(data);
            }
        });
    }
    function _get() {
        var row = $table().datagrid('getSelected');
        if (row) $form().form('load', _get_url(row.id));
    }
</script>

<script>
    /** 变量 **/
    function $bodydiv() {
        return $("#body");
    }

    function $searcharea() {
        return $('#search_area');
    }

    function $table() {
        return $('#table');
    }

    function $form() {
        return $('#form');
    }

    function $childwin() {
        return $("#child_win");
    }

    function query_condition() {
        return {
            query: true,
            name: $('#name').val(),
            manager: $('#manager').val()
        };
    }

    function datagrid_columns() {
        return [[
            {field: 'name', title: '产品名称', width: 100, halign: "center", align: "left"},
            {field: 'manager', title: '负责人', width: 100, halign: "center", align: "left"}
        ]];
    }

    function nedit_ui_url() {
        return '/admin/nedit_product.html';
    }

    function nedit_ui_width() {
        return 300;
    }

    function nedit_ui_height() {
        return 200;
    }

    function _gets_url() {
        return '/rest/admin/products';
    }

    function _get_url(id) {
        return '/rest/admin/product/' + id;
    }

    function _delete_url(id) {
        return '/rest/admin/product/' + id;
    }

    function _post_url() {
        return '/rest/admin/product';
    }

    function _put_url() {
        return '/rest/admin/product';
    }
</script>